<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <title>芝麻奥赛编程-估分系统</title>
</head>


<body style="background-color: gainsboro;">
    <div class="border3">
        <br>
        <form action="query">

            <img src="https://wechatapppro-1252524126.file.myqcloud.com/appAO5xBfTl4046/image/b_u_5fe29c849e5b6_Q6HjvniL/kyfi5xe30ytr.png" alt="" style="width:100%;">
            <hr>

            <br>
            <div class="inner_div">
                <div class="horizon_div1">
                    <label style="width: 100px;">组别：</label>
                </div>
                <div class="horizon_div2">
                    <select name="level">
                        <option value="CSP-J-">CSP-J</option>
                        <option value="CSP-S-">CSP-S</option>
                    </select>
                </div>
            </div>

            <div class="inner_div">
                <div class="horizon_div1">
                    <label style="width: 100px;">准考证号：</label>
                </div>
                <div class="horizon_div2">
                    <input type="value" name="user_id" placeholder="例如：GD-00001" style="width: auto; ">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
            <br>
            <hr>
            <br>
            <div class="progress_show">
                <div class="progress_show_content">
                    <label>CSP-J 进度</label>
                </div>
                <div class="progress_show_content">
                    <progress value={{.cspj_total}} max={{.cspj_overall}}></progress>
                </div>
                <div class="progress_show_content">
                    {{.cspj_total}}/{{.cspj_overall}}
                </div>
            </div>
            <br>
            <div class="progress_show">
                <div class="progress_show_content">
                    <label>CSP-S 进度</label>
                </div>
                <div class="progress_show_content">
                    <progress value={{.csps_total}} max={{.csps_overall}}></progress>
                </div>
                <div class="progress_show_content">
                    {{.csps_total}}/{{.csps_overall}}
                </div>
            </div>

            <hr>
            <img src="https://wechatapppro-1252524126.file.myqcloud.com/appAO5xBfTl4046/image/b_u_5fe29c849e5b6_Q6HjvniL/kyflj5mn05hg.png" width="300px">
        </form>
        <br>
    </div>
</body>

</html>

<style>
    .horizon_div1 {
        width: 100px;
        height: 50px;
    }
    
    .horizon_div2 {
        width: 300px;
        height: 50px;
    }
    
    .center_div {
        margin: 200px auto;
        text-align: center;
        background-color: azure;
        width: 700px;
        padding: 10px;
    }
    
    .border3 {
        width: 90%;
        max-width: 550px;
        background: whitesmoke;
        border-radius: 10px;
        margin: 20px auto;
        text-align: center;
        /* 重点样式 */
        box-shadow: 0 0 0 10px greenyellow;
        outline: 10px solid green;
        padding: 10px;
    }
    
    .progress_show {
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
    }
    
    .progress_show_content {
        width: 100%;
    }
    
    .inner_div {
        text-align: left;
        padding-left: 30px;
        display: flex;
        justify-content: space-between;
    }
</style>